<template>
  <div class="app-container">
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>报修信息</span>
      </div>
      
      <el-row :gutter="20" class="info-row">
        <el-col :span="8">
          <div class="info-label">报修单号：</div>
          <div class="info-content">{{ repairInfo.repairCode }}</div>
        </el-col>
        <el-col :span="8">
          <div class="info-label">设备编码：</div>
          <div class="info-content">{{ repairInfo.equipmentCode }}</div>
        </el-col>
        <el-col :span="8">
          <div class="info-label">状态：</div>
          <div class="info-content" :class="getStatusClass(repairInfo.status)">
            {{ getStatusText(repairInfo.status) }}
          </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="info-row">
        <el-col :span="8">
          <div class="info-label">故障设备名称：</div>
          <div class="info-content">{{ repairInfo.equipmentName }}</div>
        </el-col>
        <el-col :span="8">
          <div class="info-label">优先级：</div>
          <div class="info-content" :class="getPriorityClass(repairInfo.priority)">
            {{ getPriorityText(repairInfo.priority) }}
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-label">报修时间：</div>
          <div class="info-content">{{ repairInfo.reportTime }}</div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="info-row">
        <el-col :span="8">
          <div class="info-label">故障日期：</div>
          <div class="info-content">{{ repairInfo.faultTime }}</div>
        </el-col>
        <el-col :span="8">
          <div class="info-label">报修人：</div>
          <div class="info-content">{{ repairInfo.reportPerson }}</div>
        </el-col>
        <el-col :span="8">
          <div class="info-label">手机号码：</div>
          <div class="info-content">{{ repairInfo.reportPhone }}</div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="info-row">
        <el-col :span="24">
          <div class="info-label">故障描述：</div>
          <div class="info-content">{{ repairInfo.faultDescription || '无' }}</div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="info-row" v-if="repairInfo.faultImages && repairInfo.faultImages.length > 0">
        <el-col :span="24">
          <div class="info-label">故障图片：</div>
          <div class="info-content image-list">
            <el-image
              v-for="(img, index) in repairInfo.faultImages"
              :key="index"
              :src="img"
              :preview-src-list="repairInfo.faultImages"
              fit="cover"
              class="fault-image"
            ></el-image>
          </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="info-row" v-if="repairInfo.remark">
        <el-col :span="24">
          <div class="info-label">备注：</div>
          <div class="info-content">{{ repairInfo.remark }}</div>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 底部操作按钮 -->
    <div class="bottom-control">
      <el-button @click="goBack">返 回</el-button>
      <el-button 
        v-if="repairInfo.status === 'pending'" 
        type="primary" 
        @click="handleAccept"
        v-hasPermi="['sb:repair:edit']"
      >接 单</el-button>
      <el-button 
        v-if="repairInfo.status === 'pending'" 
        type="danger" 
        @click="handleCancel"
        v-hasPermi="['sb:repair:edit']"
      >取消维修</el-button>
    </div>
    
    <!-- 取消维修对话框 -->
    <el-dialog title="取消维修" :visible.sync="cancelOpen" width="500px" append-to-body>
      <el-form ref="cancelForm" :model="cancelForm" label-width="80px">
        <el-form-item label="取消原因" prop="reason">
          <el-input v-model="cancelForm.reason" type="textarea" placeholder="请输入取消原因"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCancel">确 定</el-button>
        <el-button @click="cancelOpen = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRepairApplication, acceptRepairApplication, cancelRepairApplication } from "@/api/sb/repairApplication";

export default {
  name: "RepairApplicationDetail",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 报修单信息
      repairInfo: {},
      // 取消维修对话框
      cancelOpen: false,
      // 取消维修表单
      cancelForm: {
        id: null,
        reason: null
      },
    };
  },
  created() {
    console.log("路由参数:", this.$route.query);
    const id = this.$route.query.id;
    console.log("获取到的ID:", id, typeof id);
    
    if (id === undefined || id === 'undefined') {
      this.$message.error("参数错误：未找到有效的报修单ID");
      this.goBack();
      return;
    }
    
    this.getDetail(id);
  },
  methods: {
    /** 查询报修单详细 */
    getDetail(id) {
      console.log("开始获取报修单详情, ID:", id);
      this.loading = true;
      getRepairApplication(id).then(response => {
        console.log("获取到的报修单详情:", response);
        
        if (response.data) {
          // 确保数据同时包含id和repairId字段
          if (response.data.repairId && !response.data.id) {
            response.data.id = response.data.repairId;
          } else if (response.data.id && !response.data.repairId) {
            response.data.repairId = response.data.id;
          }
        }
        
        this.repairInfo = response.data;
        
        // 处理故障图片数据
        if (this.repairInfo.faultImages) {
          try {
            // 如果是JSON字符串，解析为数组
            if (typeof this.repairInfo.faultImages === 'string') {
              this.repairInfo.faultImages = JSON.parse(this.repairInfo.faultImages);
            }
            // 确保是数组格式
            if (!Array.isArray(this.repairInfo.faultImages)) {
              this.repairInfo.faultImages = [];
            }
          } catch (e) {
            console.error("解析故障图片数据失败:", e);
            this.repairInfo.faultImages = [];
          }
        } else {
          this.repairInfo.faultImages = [];
        }
        
        this.loading = false;
      }).catch(error => {
        console.error("获取报修单详情失败:", error);
        this.loading = false;
        this.$message.error("获取报修单详情失败");
        this.goBack();
      });
    },
    // 返回按钮
    goBack() {
      this.$router.go(-1);
    },
    /** 接单按钮操作 */
    handleAccept() {
      const id = this.repairInfo.repairId;
      this.$modal.confirm('是否确认接单？').then(function() {
        return acceptRepairApplication(id);
      }).then(() => {
        this.$modal.msgSuccess("接单成功");
        this.getDetail(id);
      }).catch(() => {});
    },
    /** 取消维修按钮操作 */
    handleCancel() {
      this.cancelForm = {
        id: this.repairInfo.repairId,
        reason: null
      };
      this.cancelOpen = true;
    },
    /** 提交取消维修 */
    submitCancel() {
      if (!this.cancelForm.reason) {
        this.$message.error("请输入取消原因");
        return;
      }
      cancelRepairApplication(this.cancelForm.id, this.cancelForm.reason).then(response => {
        this.$modal.msgSuccess("取消成功");
        this.cancelOpen = false;
        this.getDetail(this.cancelForm.id);
      });
    },
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'pending': '待接单',
        'processing': '待维修',
        'repairing': '维修中',
        'completed': '已完成',
        'canceled': '已取消'
      };
      return statusMap[status] || '未知状态';
    },
    // 获取状态样式类
    getStatusClass(status) {
      const classMap = {
        'pending': 'status-pending',
        'processing': 'status-waiting',
        'repairing': 'status-processing',
        'completed': 'status-completed',
        'canceled': 'status-canceled'
      };
      return classMap[status] || '';
    },
    // 获取优先级文本
    getPriorityText(priority) {
      const priorityMap = {
        'normal': '普通',
        'urgent': '紧急',
        'high': '非常紧急'
      };
      return priorityMap[priority] || '普通';
    },
    // 获取优先级样式类
    getPriorityClass(priority) {
      const classMap = {
        'normal': 'priority-normal',
        'urgent': 'priority-urgent',
        'high': 'priority-very-urgent'
      };
      return classMap[priority] || '';
    }
  }
};
</script>

<style scoped>
.info-row {
  margin-bottom: 20px;
}
.info-label {
  font-weight: bold;
  margin-bottom: 5px;
}
.info-content {
  color: #606266;
}
.bottom-control {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  line-height: 60px;
  background: #fff;
  box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  z-index: 99;
  padding: 0 20px;
}
.app-container {
  padding-bottom: 60px;
}
.fault-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  object-fit: cover;
  border: 1px solid #ddd;
}
.fault-image:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.image-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.status-pending {
  color: #E6A23C;
}
.status-waiting {
  color: #409EFF;
}
.status-processing {
  color: #409EFF;
}
.status-completed {
  color: #67C23A;
}
.status-canceled {
  color: #F56C6C;
}
.priority-normal {
  color: #409EFF;
}
.priority-urgent {
  color: #E6A23C;
}
.priority-very-urgent {
  color: #F56C6C;
}
</style> 